<template>
  <section>
    <el-row>
      <!--工具条-->
      <el-col :span="24" class="toolbar">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item>
            <el-date-picker
              v-model="dateValue"
              type="datetimerange"
              :picker-options="pickerOptions"
              placeholder="选择时间范围"
              align="right">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-select v-model="refreshRate" placeholder="频率(秒)" @change="poll">
              <el-option
                v-for="(item,index) in dateOptions"
                :label="item.label"
                :value="item.value"
                :key="index">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-row>
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="组件详情" name="first">
          <Page521 ref="m521" :dateValue="dateValue" :rTime="rTime" :reSizeCode='reSizeCode521'></Page521>
        </el-tab-pane>
        <el-tab-pane label="关键指标" name="second">
          <Page522 ref="m522" :dateValue="dateValue" :rTime="rTime" :reSizeCode='reSizeCode522'></Page522>
        </el-tab-pane>
      </el-tabs>
    </el-row>

  </section>
</template>

<script>
  //	import util from '../../common/util'
  import Page521 from './Page521.vue'
  import Page522 from './Page522.vue'

  export default {
    components: {Page521, Page522},
    data() {
      return {
        refreshRate: '60', //刷新频率
        dateValue: [], //请求显示的时间
        rTime: [],
        reSizeCode521:'',
        reSizeCode522:'',
        activeName: 'first',
        pollEvent: '',
        dateOptions: [
          {label: '10秒', value: '10'},
          {label: '30秒', value: '30'},
          {label: '60秒', value: '60'},
          {label: '10分钟', value: '600'},
          {label: '不刷新', value: '9999999999999999999999999'}
        ],
        formInline: {},
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
          shortcuts: [{
            text: '最近 1 小时',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 1);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近 2 小时',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 2);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近 4 小时',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 4);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近 12 小时',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 12);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近 24 小时',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近 1 个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }/*, {
            text: '最近 3 个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近 1 年',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 365);
              picker.$emit('pick', [start, end]);
            }
          }*/]
        }
      }
    },
    watch: {
      dateValue () {
        return this.rTime = [Date.parse(this.dateValue[0]) / 1000, Date.parse(this.dateValue[1]) / 1000];
      },
      activeName(){
        this.timePoll();
      },
      /*refreshRate () {
       this.poll();
       }*/
    },
    methods: {
      handleClick (tab, event) {
        this.activeName = tab.name;
        if(tab.name=='second'){
          this.reSizeCode522 = Math.random()+''
        }else this.reSizeCode521 = Math.random()+''
      },
      timePoll () { // 刷新事件

        if (this.$route.name !== '平台监控') { return false }
        if(this.activeName =='first'){
          // page521 组件图标调用事件
          this.$refs.m521.getCPUUsageHttp();
          this.$refs.m521.getMemoryUsageMemsHttp();

          this.$refs.m521.getHdfsCapacityHttp();
          this.$refs.m521.getDataNodesHttp();

          this.$refs.m521.getYARNMemoryHttp();
          this.$refs.m521.getNodeManagersHttp();

          this.$refs.m521.getOnlineRegionServerHttp();
          this.$refs.m521.getHbaseTablesHttp();
          this.$refs.m521.getClusterRegionsHttp();

          this.$refs.m521.getHiveDBsHttp();
          this.$refs.m521.getHiveTablesHttp();
          this.$refs.m521.getHivePartitionsHttp();
        }else {
          //page522 组件图标调用事件
          this.$refs.m522.getAppsStateHttp();

          this.$refs.m522.getHdfsLoadTotalHttp();
          this.$refs.m522.getHdfsCapacityInfoHttp();

          this.$refs.m522.getHbaseRegionServerMemsLayoutHttp();
          this.$refs.m522.getHbaseRegionServerRpcHttp();

          this.$refs.m522.getKafkaBytesInOrOutPerSecHttp();
          this.$refs.m522.getKafkaMessagesInPerSecHttp();
        }
      },
      poll (val) { // 刷新频率

        /*clearTimeout(this.pollEvent);
         this.pollEvent = setTimeout( () => {
         this.timePoll()
         this.poll(this.refreshRate);
         }, parseInt(val) * 1000);*/
        if (this.pollEvent != '') {
          clearInterval(this.pollEvent)
        }
        if(!val) {val = this.refreshRate}
          this.pollEvent = setInterval( () => {
            this.timePoll()
          }, parseInt(val) * 1000);

      }
    },
    beforeMount () {
      let d = new Date();
      let f = d.setTime(Date.parse(d) - 7 * 24 * 60 * 60 * 1000);
      this.dateValue = [d, Date(f)];
    },
    mounted () {
      this.poll();
    },
    beforeDestroy(){
      clearInterval(this.pollEvent);
      window.onresize = undefined
    //  clearTimeout(this.pollEvent);
      console.log('关闭定时请求')
    },
  }
</script>

<style scoped>
  .chart {
    width: 100%;
    float: left;
  }

  .camys {
    width: 100%;
    text-align: center;
    font-size: 65px;
    line-height: 300px;
    color: #1d90e6;
  }

  .toolbar {
    padding: 0 0 10px 0;
  }
</style>